<template>
    <div id="water-quality-monitoring">
        <div class="container monitoring-data">
            <div class="pic clearfix">
                <div class="img charts-bg">
                    <div class="biaoti"><span>江南水厂浊度</span></div>
                    <div id="jiangnan" class="box-pie" style="width:252px; height: 147px;z-index:9" ref="chart"></div>
                    <div class="bg-img"><img src="../assets/image/water-monitor/bg_zhuodu.png" alt=""></div>
                </div>
                <div class="img charts-bg">
                    <div class="biaoti"><span>江北水厂浊度</span></div>
                    <div id="jiangbei" class="box-pie" style="width:252px; height: 147px;z-index:9" ref="chart"></div>
                    <div class="bg-img"><img src="../assets/image/water-monitor/bg_zhuodu.png" alt=""></div>
                </div>
                <div class="img charts-bg">
                    <div class="biaoti">
                        <span>余氯检测仪-01
                            <img src="../assets/image/water-monitor/icon-svg/yellow_icon.png" alt="">
                            <p style="font-size: 10px;width: 140px">（2022-09-23 14:00:23）</p>
                            <p><span style="font-size: 26px;color: #0CAFC6;font-weight:700;line-height: 36px">0.35&nbsp;&nbsp;</span>(mg/L)</p>
                        </span>
                        
                    </div>
                    <div id="yulv1" class="box-pie" style="width:252px; height: 147px;margin-top:28px;margin-left:0px;z-index:9" ref="chart"></div>
                    <div class="bg-img"><img src="../assets/image/water-monitor/bg_jianceyi.png" alt=""></div>
                </div>
                <div class="img charts-bg">
                    <div class="biaoti">
                        <span>余氯检测仪-02
                            <img src="../assets/image/water-monitor/icon-svg/red_icon.png" alt="">
                            <p style="font-size: 10px;width: 140px">（2022-09-23 14:00:23）</p>
                            <p><span style="font-size: 26px;color: #0CAFC6;font-weight:700;line-height: 36px">0.35&nbsp;&nbsp;</span>(mg/L)</p>
                        </span>
                    </div>
                    <div id="yulv2" class="box-pie" style="width:252px; height: 147px;margin-top:28px;margin-left:0px;z-index:9" ref="chart"></div>
                    <div class="bg-img"><img src="../assets/image/water-monitor/bg_jianceyi.png" alt=""></div>
                </div>
                <div class="img charts-bg">
                    <div class="biaoti">
                        <span>余氯检测仪-03
                            <img src="../assets/image/water-monitor/icon-svg/green_icon.png" alt="">
                            <p style="font-size: 10px;width: 140px">（2022-09-23 14:00:23）</p>
                            <p><span style="font-size: 26px;color: #0CAFC6;font-weight:700;line-height: 36px">0.35&nbsp;&nbsp;</span>(mg/L)</p>
                        </span>
                    </div>
                    <div id="yulv3" class="box-pie" style="width:252px; height: 147px;margin-top:28px;margin-left:0px;z-index:9" ref="chart"></div>
                    <div class="bg-img"><img src="../assets/image/water-monitor/bg_zhuodu.png" alt=""></div>
                </div>
                <div class="img charts-bg">
                    <div class="biaoti">
                        <span>余氯检测仪-04
                            <img src="../assets/image/water-monitor/icon-svg/green_icon.png" alt="">
                            <p style="font-size: 10px;width: 140px">（2022-09-23 14:00:23）</p>
                            <p><span style="font-size: 26px;color: #0CAFC6;font-weight:700;line-height: 36px">0.35&nbsp;&nbsp;</span>(mg/L)</p>
                        </span>
                    </div>
                    <div id="yulv4" class="box-pie" style="width:252px; height: 147px;margin-top:28px;margin-left:0px;z-index:9" ref="chart"></div>
                    <div class="bg-img"><img src="../assets/image/water-monitor/bg_zhuodu.png" alt=""></div>
                </div>
                <div class="img charts-bg">
                    <div class="biaoti">
                        <span>余氯检测仪-05
                            <img src="../assets/image/water-monitor/icon-svg/green_icon.png" alt="">
                            <p style="font-size: 10px;width: 140px">（2022-09-23 14:00:23）</p>
                            <p><span style="font-size: 26px;color: #0CAFC6;font-weight:700;line-height: 36px">0.35&nbsp;&nbsp;</span>(mg/L)</p>
                        </span>
                    </div>
                    <div id="yulv5" class="box-pie" style="width:252px; height: 147px;margin-top:28px;margin-left:0px;z-index:9" ref="chart"></div>
                    <div class="bg-img"><img src="../assets/image/water-monitor/bg_zhuodu.png" alt=""></div>
                </div>
                <!-- <div class="img"><img src="../assets/image/water-monitor/Group 1114.png" alt=""></div> -->
                <!-- <div class="img"><img src="../assets/image/water-monitor/Group 1115.png" alt=""></div> -->
                <!-- <div class="img"><img src="../assets/image/water-monitor/Group 1116.png" alt=""></div> -->
                <!-- <div class="img"><img src="../assets/image/water-monitor/Group 1117.png" alt=""></div> -->
                <!-- <div class="img"><img src="../assets/image/water-monitor/Group 1118.png" alt=""></div> -->
                <!-- <div class="img"><img src="../assets/image/water-monitor/Group 1119.png" alt=""></div> -->
                <!-- <div class="img"><img src="../assets/image/water-monitor/Group 1120.png" alt=""></div> -->
            </div>
            <div class="choose-button clearfix">
                <el-button-group class="container choose-data">
                    <el-button type="primary" class="bg-color checked">监测数据</el-button>
                    <!-- <el-button type="primary" class="bg-color">告警数据</el-button> -->
                    <div class="right">
                        <el-button type="primary" class="bg-color"><i class="el-icon-upload el-icon--right"></i>导入</el-button>
                        <el-button type="primary" class="bg-color" @click="exportData()"><i class="el-icon-download el-icon--right"></i>导出</el-button>
                    </div>
                </el-button-group>
                <div class="option container">
                    <span>点位：
                            <!-- <el-checkbox-group v-model="checkList">
                                <el-checkbox label="水厂" :checked="false"></el-checkbox>
                                <el-checkbox label="管网" :checked="false"></el-checkbox>
                            </el-checkbox-group> -->
                            <el-select v-model="value1" placeholder="全部" :popper-append-to-body="false">
                                <el-option
                                v-for="item in pipeType"
                                :key="item.value1"
                                :label="item.label"
                                :value="item.value1">
                                </el-option>
                            </el-select>
                        </span>
                    <span>设备：
                            <el-select v-model="value2" placeholder="全部" :popper-append-to-body="false">
                                <el-option
                                v-for="item in options"
                                :key="item.value2"
                                :label="item.label"
                                :value="item.value2">
                                </el-option>
                            </el-select>
                        </span>
                    <span>告警数据：
                            <el-select v-model="value3" placeholder="全部" :popper-append-to-body="false">
                                <el-option
                                v-for="item in warningData"
                                :key="item.value3"
                                :label="item.label"
                                :value="item.value3">
                                </el-option>
                            </el-select>
                        </span>
                    <div class="block">
                        <span class="demonstration">时间：</span>
                        <el-date-picker :popper-append-to-body="false"
                        value-format='yyyy-MM-dd HH:mm:ss' 
                        v-model="startTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00">
                        </el-date-picker>
                        <!-- <el-date-picker :popper-append-to-body="false" 
                        value-format='yyyy-MM-dd  HH:mm:ss' 
                        popper-class="elDatePicker" 
                        v-model="startTime" 
                        align="right" type="date" 
                        placeholder="选择日期" >
                        </el-date-picker> -->
                        <span class="demonstration">至</span>
                        <el-date-picker :popper-append-to-body="false"
                        value-format='yyyy-MM-dd HH:mm:ss' 
                        v-model="endTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00">
                        </el-date-picker>
                        <!-- <el-date-picker :popper-append-to-body="false" 
                        value-format='yyyy-MM-dd  HH:mm:ss' 
                        popper-class="elDatePicker" 
                        v-model="endTime" type="date" 
                        placeholder="选择日期">
                        </el-date-picker> -->
                    </div>
                    <el-row>
                        <el-button round style="background:#1AB394;" @click="resetData()">重置</el-button>
                        <el-button type="warning" round @click="getData()">查询</el-button>
                    </el-row>
                    <el-button-group>
                        <!-- <el-button class="bg-color" type="primary" icon="el-icon-s-grid">表格</el-button> -->
                        <!-- <el-button class="bg-color" type="primary" icon="el-icon-map-location">地图</el-button> -->
                    </el-button-group>
                </div>
            </div>
            <div class="table clearfix" :popper-append-to-body="false">
                <el-card>
                    <el-table :popper-append-to-body="false" ref="multipleTable" :data="tableData" height:250px tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" v-model="ids"></el-table-column>
                        <el-table-column prop="code" label="编号"></el-table-column>
                        <el-table-column prop="address" label="位置" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="value" label="余氯"> </el-table-column>
                        <el-table-column prop="warn" label="是否超标" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="normalRange" label="正常范围" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="status" label="设备状态" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <!-- <el-table :popper-append-to-body="false" ref="multipleTable" :data="tableData" height:250px tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="code" label="编号" width="320px"></el-table-column>
                        <el-table-column prop="address" label="位置" show-overflow-tooltip width="340px"></el-table-column>
                        <el-table-column prop="value" label="余氯" width="220px"> </el-table-column>
                        <el-table-column prop="warn" label="是否超标" show-overflow-tooltip width="320px"></el-table-column>
                        <el-table-column prop="normalRange" label="正常范围" show-overflow-tooltip width="320px"></el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip width="320px"></el-table-column>
                        <el-table-column prop="status" label="设备状态" show-overflow-tooltip width="200px"></el-table-column>
                    </el-table> -->
                    <div class="block">
                        <el-pagination :popper-append-to-body="false" 
                        @size-change="handleSizeChange" 
                        @current-change="handleCurrentChange" 
                        :current-page="pageInfo.currentPage" 
                        :page-sizes="[5, 8, 10, 12]" 
                        :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" 
                        :total="pageInfo.pageTotal">
                        </el-pagination>
                    </div>
                    <!-- <el-pagination :popper-append-to-body="false"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="query.pageNum"
                            :page-sizes="[3, 4, 5, 8]"
                            :page-size="query.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="query.total"
                        ></el-pagination> -->
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import vue from 'vue';
import axios from 'axios'
import {exportYULVData} from '@/api/index.js'
import { saveAs } from 'file-saver'
export default {
    data() {
        return {
            // checked: false,
            // checkList: ['选中且禁用', '复选框 A'],
            // seclectedId:[],
            // ids:[],
            selectIds:[],
            pipeType:[{
                value1: '水厂',
                label: '水厂'
            }, {
                value1: '管网',
                label: '管网'
            },],
            value1: '',
            options: [{
                value2: '在线',
                label: '在线'
            }, {
                value2: '离线',
                label: '离线'
            },],
            value2: '',
            warningData: [{
                value3: '正常',
                label: '正常'
            }, {
                value3: '异常',
                label: '异常'
            }],
            value3: '',
            startTime: '',
            endTime: '',
            //table 表数据
            tableData: [],
            //分页数据
            // query: {
            //     pageNum: 1,
            //     pageSize: 8,
            //     total: 20
            // },
            pageInfo: {
                currentPage: 1,
                pageSize: 8,
                pageTotal: 0
            }

        }
    },
    mounted() {
        this.getData();
        // this.exportData();
        this.$nextTick(() => {
            this.getPage_zhuodu();
            this.getPage_yulv();

		})
    },
    methods: {
        resetData(){
            this.value1 = ''
            this.value2 = ''
            this.value3 = ''
            this.startTime = ''
            this.endTime = ''
            this.getData()
        },
        getPage_yulv(){
            let option = {
                 xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                series: [
                    {
                        data: [0.32, 0.39, 0.45, 0.32, 0.42, 0.41,0.48,0.58],
                        type: 'line',
                        symbol: null,
                        symbolSize: 0,
                        showSymbol: false,
                        lineStyle: {
                            color: '#0CAFC6',
                            width: 2,
                            type: 'scrollDataIndex',
                        },
                        areaStyle: {
                            //区域填充渐变颜色
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(2, 154, 250, 0.3)' // 0% 处的颜色
                                }, {
                                    offset: 0.7, color: 'rgba(2, 154, 250, 0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                    },
                ]
                };
                var yulv1 = this.$echarts.init(document.getElementById('yulv1'));
                yulv1.setOption(option);
                var yulv2 = this.$echarts.init(document.getElementById('yulv2'));
                yulv2.setOption(option);
                var yulv3 = this.$echarts.init(document.getElementById('yulv3'));
                yulv3.setOption(option);
                var yulv4 = this.$echarts.init(document.getElementById('yulv4'));
                yulv4.setOption(option);
                var yulv5 = this.$echarts.init(document.getElementById('yulv5'));
                yulv5.setOption(option);
            },
        getPage_zhuodu(){
            let option = {
                    series: [
                    {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '75%'],
                    radius: '90%',
                    min: 0,
                    max: 1,
                    splitNumber: 4,
                    axisLine: {
                        lineStyle: {
                        width: 4,
                        color: [
                            [0.25, '#14C111'],
                            [0.5, '#14C111'],
                            [0.75, '#F30000'],
                            [1, '#F30000']
                        ]
                        }
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '12%',
                        width: 10,
                        offsetCenter: [0, '-40%'],
                        itemStyle: {
                        color: 'auto'
                        }
                    },
                    axisTick: {
                        length: 5,
                        lineStyle: {
                        color: 'auto',
                        width: 2
                        }
                    },
                    splitLine: {
                        length: 5,
                        lineStyle: {
                        color: 'auto',
                        width: 1
                        }
                    },
                    axisLabel: {
                        color: '#464646',
                        fontSize: 14,
                        distance: -60,
                        rotate: 'tangential',
                        formatter: function (value) {
                        if (value === 0.875) {
                            return '';
                        } else if (value === 0.625) {
                            return '';
                        } else if (value === 0.375) {
                            return '';
                        } else if (value === 0.125) {
                            return '';
                        }
                        return '';
                        }
                    },
                    title: {
                        offsetCenter: [0, '5%'],
                        fontSize: 14,
                        color: '#999'
                    },
                    detail: {
                        fontSize: 14,
                        offsetCenter: [0, '35%'],
                        valueAnimation: true,
                        formatter: function (value) {
                        return Math.round(value * 2) - '0.65';
                        },
                        color: 'auto'
                    },
                    data: [
                        {
                        value: '0.35',
                        name: 'NTU'
                        }
                    ]
                    }
                ]
            }
            // 引用chart并初始化
            // this.chart = this.$echarts.init(this.$refs.chart);
            // 使用刚指定的配置项和数据显示图表。
            // this.chart.setOption(this.option);
            var jiangnan = this.$echarts.init(document.getElementById('jiangnan'));
			jiangnan.setOption(option);
            var jiangbei = this.$echarts.init(document.getElementById('jiangbei'));
			jiangbei.setOption(option);
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            // this.multipleSelection = val;
            // for(let seclectedItem of val) {
            //     this.seclectedId.push(seclectedItem.id)
            //     const qc = [...new Set(this.seclectedId)]
            //     this.ids = qc
            //     console.log(this.ids)
            // }
			let arr = [];
			val.forEach(element => {
				arr.push(element.id)
			});
			this.selectIds = arr;
        },
         // 分页查询
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageInfo.pageSize = val;
            this.getData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.currentPage = val;
            this.getData()
        },
        getData() {
            //table总数据
            // get请求
            // axios.get('http://43.136.137.111:9898/system/residual/chlorine/all', {
            // }).then(res => {
            //     debugger
            //     this.tableData = res.data;
            //     console.log(this.tableData)
            //     //  e.data;
            // }).catch(error => {
            //     console.log(error, 404)
            // })
            // post请求
            this.$axios.post('http://43.136.137.111:9898/system/residual/chlorine/list',{
                pageSize: this.pageInfo.pageSize,
                pageNum: this.pageInfo.currentPage,
                type: this.value1,
                status: this.value2,
                warn: this.value3,
                startTime: this.startTime,
                endTime: this.endTime
            }).then( res =>{
                this.tableData = res.data.rows
                // console.log(this.tableData)
                this.pageInfo.pageTotal = res.data.total
                // console.log(this.value1)
                // console.log(this.value2)
                // console.log(this.startTime)
                // console.log(this.endTime)
            }).catch( error =>{
                console.log(error, 404)
            })
            // axios.post('http://43.136.137.111:9898/system/residual/chlorine/list', {
            //     pageSize: this.pageInfo.pageSize
            // }).then(res => {
            //     this.tableData = res.data.rows;
            //     this.pageInfo.pageTotal = this.tableData.length
            // }).catch(error => {
            //      console.log(error, 404)
            // }) 
        },
        exportData(){
           this.fullscreenLoading = true;
			exportYULVData({ids:this.selectIds}).then(res => {
				let blob = new Blob([res.data])
				const fliName = '余氯数据'+new Date().getTime()+ '.xlsx'
				saveAs(blob,fliName)
				this.fullscreenLoading = false;
			}).catch(error => {
				console.log(error)
			})
        },
    },
    created() {
        this.getData()
        // this.exportData()
    }
}
</script>

<style lang="less" scoped>
ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.bg-color {
    color: #666;
    background-color: #02182d;
    border-color: #666;
}
/* 清除浮动 */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}
span {
    font-size: 16px;
    color: #fff;
}
.charts-bg{
    position: relative;
    .biaoti{
        width: 120px;
        height: 24px;
        z-index: 9;
        position: absolute;
        left: 10px;
        top: 12px;
        text-align: center;
        line-height: 24px;
        opacity: .7;
        span{
            font-size: 14px;;
        }
    }
    .bg-img{
        position: absolute;
        top: 0;
        left: 0;
    }
    .biaoti img{
        position: absolute;
        top: 0;
        right: -102px;
    }
}
/deep/ .el-input__prefix{
    left: 10px;
}
/deep/ .el-input--prefix .el-input__inner {
    padding-left: 32px;
}
/deep/ .el-card__body,
.el-main {
    padding: 0;
}

// /deep/ .el-table .el-table_1_column_5 {
//     text-align: center;
// }

// /deep/ .el-table .el-table_1_column_6 {
//     text-align: center;
// }

// /deep/ .el-table .el-table_1_column_7 {
//     text-align: center;
// }

// /deep/ .el-table .el-table_1_column_8 {
//     text-align: center;
// }

/deep/ .el-checkbox__inner {
    background-color: #02182d;
}

/deep/ .el-picker-panel {
    background-color: #02182d !important;
}

#water-quality-monitoring {
    position: absolute;
    background: #02182d;
    width: 100%;
    height: 100%;
    top: 0px;
    .monitoring-data {
        margin-top: 82px;
    }
    .container {
        background-color: #02182d;
        position: relative;
        width: 100%;
        .top_bar {
            // margin-bottom: 40px;
        }
        .pic {
            width: 100%;
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 60px;
            //margin-left: 40px; 
            .img {
                max-width: 252px;
                max-height: 147px;
            }
        }
        .choose-button {
            position: relative;
            display: block;
            top: 230px;
            height: 32px;
            padding: 8px 0;
            border-bottom: 1px solid #666;
            .el-button {
                border: 1px solid #666; //background: #02182d;
                width: 80px;
                font-size: 14px;
                padding: 8px 12px;
                color: #fff;
            }
            .el-button:hover {
                border: 1px solid #029AFA;
                color: #029AFA;
            }
            .choose-data .el-button:nth-child(1) {
                color: #029AFA;
                border: #029AFA 1px solid;
            }
            .choose-data {
                position: absolute;
                top: 10px; //left: 10px;
                .checked {
                    margin-left: 40px;
                }
                .right {
                    display: inline-block;
                    float: right;
                    margin-right: 120px; //padding: 0 32px;
                    /deep/ .el-button {
                        width: 52px;
                        height: 32px;
                        font-size: 13px;
                        padding: 8px 8px;
                        .el-icon--right {
                            margin-left: 0px;
                        }
                    }
                    /deep/ .el-button-group .el-button:nth-child(1) {
                        color: #029AFA;
                        border: 1px solid #029AFA;
                    }
                }
            }
            .option {
                position: absolute;
                display: flex;
                justify-content: space-between;
                height: 100px;
                top: 80px;
                .el-row .el-button:hover {
                    border: 1px solid #fff;
                    color: #333;
                }
                span:nth-child(1) {
                    //margin-top: 6px;
                    margin-left: 40px;
                }
                .el-checkbox-group {
                    display: inline-block;
                    .el-checkbox {
                        color: #fff;
                        margin-right: 16px;
                    }
                }
                .el-select {
                    width: 146px;
                    /deep/ .el-input__inner {
                        height: 30px;
                        -webkit-appearance: none;
                        background-color: #02182d !important;
                        color: #fff;
                        border: 1px solid #666;
                        border-radius: 0px;
                        text-align: center;
                    }
                    /deep/ .el-select .el-input .el-select__caret {
                        color: #fff;
                    }
                    /deep/ .el-select-dropdown {
                        background-color: #02182d !important;
                        border-radius: 0px;
                        /deep/ .el-select-dropdown__item {
                            background-color: transparent;
                            color: #fff;
                        }
                        /deep/ .el-select-dropdown__item.hover,
                        /deep/ .el-select-dropdown__item:hover {
                            color: #fff;
                        }
                        /deep/ .el-popper .popper__arrow,
                        .el-popper .popper__arrow::after {
                            display: none;
                        }
                    }
                    /deep/ .el-select-dropdown__wrap {
                        background-color: #02182d !important;
                    }
                }
                .block {
                    display: inline-block;
                    /deep/ .el-date-editor.el-input,
                    .el-date-editor.el-input__inner {
                        width: 195px;
                        height: 32px;
                    }
                    /deep/ .el-input__inner {
                        background-color: #02182d !important;
                        color: #fff;
                        border: 1px solid #666;
                        height: 32px;
                    }
                    /deep/ .el-picker-panel {
                        background-color: #02182d !important;
                    }
                }
                .el-row {
                    display: inline-block;
                    .el-button {
                        width: 80px;
                        height: 32px;
                        line-height: 0;
                    }
                }
            }
            /deep/ .el-input__icon {
                line-height: 34px;
            }
        }
        .table {
            position: absolute;
            display: block;
            width: 100%;
            top: 370px;
            background-color: #02182d !important;
        }
        // /deep/ .el-table,
        // .el-table__expanded-cell {
        //     background-color: transparent;
        //     padding: 0 40px;
        // }
        // /deep/ .el-table th,
        // .el-table tr {
        //     background-color: transparent;
        //     border-bottom: 1px solid #02182d;
        //     height: 56px;
        // }
        // /deep/ .el-table__body tr:hover>td {
        //     border: 1px solid #029AFA;
        //     border-color: #02182d !important;
        //     color: #029AFA;
        //     background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
        // }
        // .el-card {
        //     border: none;
        //     background: #02182d !important;
        // }
        // /deep/ .el-table tr {
        //     background-color: #02182d;
        //     color: #fff;
        //     opacity: .8;
        //     border: none;
        //     border-bottom: 1px solid #666;
        // }
        // /deep/ .el-table__header tr:nth-child(1) {
        //     background: rgba(11, 117, 216, 0.1);
        // }
        // /deep/ .el-pagination__total {
        //     color: #fff;
        // }
        // /deep/ .el-input__inner {
        //     background-color: #02182d !important;
        //     color: #fff;
        // }
        // /deep/ .el-pagination button:disabled {
        //     background-color: #02182d !important;
        // }
        // /deep/ .el-pagination .btn-next,
        // /deep/ .el-pagination .btn-prev {
        //     background: #02182d !important;
        //     color: #fff;
        // }
        // /deep/ .el-pagination .btn-next:hover,
        // /deep/ .el-pagination .btn-prev:hover {
        //     color: #029AFA;
        // }
        // /deep/ .el-pager li {
        //     background-color: #02182d !important;
        //     color: #fff;
        // }
        // /deep/ .el-pager li:hover {
        //     color: #029AFA;
        // }
        // /deep/ .el-pagination__jump {
        //     color: #fff;
        // }
        // /deep/ .el-table td.el-table__cell,
        // .el-table th.el-table__cell.is-leaf {
        //     border-bottom: 1px solid #666;
        //     height: 56px;
        // }
        // /deep/ .el-table--border::after,
        // .el-table--group::after,
        // .el-table::before {
        //     background-color: #666;
        // }
        // /deep/ .el-select-dropdown {
        //     background-color: #02182d !important;
        // }
        // /deep/ .el-pagination .el-select .el-input .el-input__inner {
        //     border: none;
        //     border: 1px solid #666;
        //     border-radius: 3px;
        // }
        // /deep/ .el-pagination__editor .el-input__inner {
        //     border: none;
        //     border: 1px solid #666;
        // }
        // /deep/.el-pagination {
        //     margin: 20px 40%;
        // }
        // /deep/ .el-table tr:nth-child(7) td:nth-child(8) {
        //     color: orange;
        // }
       // /deep/ .el-table tr:nth-child(8) td:nth-child(5) {
            //color: red;
       // }
    }
}

.el-pagination {
    margin-top: 15px;
}
</style>